<template>
	<view class="status-bar" :style="{height: capsuleBarHeight + 'px'}"></view>
	<view class="capsule-bar" :style="{height: totalHeight + 'px'}"></view>
</template>

<script>
export default {
	data() {
		return {
			totalHeight: 0,
		};
	},
	mounted() {
		const wi = uni.getWindowInfo();
		const mc = wx.getMenuButtonBoundingClientRect()
		this.capsuleBarHeight = wi.statusBarHeight
		this.totalHeight = mc.height + (mc.top - wi.statusBarHeight) * 2;
	}
};
</script>

<style scoped>
.status-bar {
	background-color: transparent;
}
.capsule-bar {
	width: 100%;
	background-color: red;
}

</style>